<template>
  <!-- 新的新建表单中部组件 -->
  <el-card class="elcard">
    <div slot="header" class="clearfix">
      <span>表单设计</span>
      <el-button style="float: right; padding: 3px 0;margin-left:5px" type="text" @click="save">保存</el-button>

    </div>
    <div>
      <div class="itembox">
        <div class="itembox_item" v-for="(item,index) in namearr" :key="index"
            draggable="true"
            @dragstart="handleDragStart($event, item)"
            @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)"
            @dragend="handleDragEnd($event, item)"
            @click="itemclick(item)"
            @dblclick="dblclick(item)"
        >
              {{item}}
        </div>
      </div>
    </div>

  </el-card>
</template>

<script>

  export default {
    created() {
   },
    props: {
      idsarr:{
        type: Array,
        default: () => {
          return []
        }
      },
      newitems: {
        type: Array,
        default: () => {
          return []
        }
      },
      itemid:{
        type:String,
        default: () => {
          return []
        }
      }
    },
    watch: {

    newitems(newval,oldval){
      if(newval){
        this.allarr=newval
        if(this.idsarr!=[]){
          for(var c=0;c<this.idsarr.length;c++){
            for(var i=0;i<this.allarr.length;i++){
             if(this.idsarr[c]==this.allarr[i].type.id){
               console.log(this.allarr[i].type.name)
               this.namearr.push(this.allarr[i].type.name)
             }
            }

          }

        }

      }

    },

    itemid(newval){
      if(newval){
       for(var i=0;i<this.newitems.length;i++){
         if(newval==this.newitems[i].type.id){
           console.log(this.newitems[i].type.name)
           this.namearr.push(this.newitems[i].type.name)
         }
       }
      }


    }
    },
    methods:{
    save(){
        this.idarr=[]
    for(var c=0;c<this.namearr.length;c++){
      for(var i=0;i<this.allarr.length;i++){
       if(this.namearr[c]==this.allarr[i].type.name){
         this.idarr.push(this.allarr[i].type.id)

       }
      }


    }


      this.$emit('save',{idarr:this.idarr})

    },

      // 删除
      dblclick(item){
        this.namearr.splice(item,1)
      },
      itemclick(item){

      },
      // 换位置
         handleDragStart(e,item){

          this.dragging = item;
         },
         handleDragEnd(e,item){
          this.dragging = null

         },
         //首先把div变成可以放置的元素，即重写dragenter/dragover
         handleDragOver(e) {
          e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
         },
         handleDragEnter(e,item){
           console.log(item)
        e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
          if(item === this.dragging){
           return
          }
          const newItems = [...this.namearr]
         
          const src = newItems.indexOf(this.dragging)
          const dst = newItems.indexOf(item)

          newItems.splice(dst, 0, ...newItems.splice(src, 1))

          this.namearr = newItems
          console.log( '现在的', this.namearr )
          }
    },
    data() {
      return {
          namearr:[],//名字id数组
          allarr:[],//全部信息
          // 点击的itemid
          itmesid:null,
          dragging: null,
          idarr:[],//ID数组
          newItems:[]


      }
    }
  }
</script>

<style  lang="less" scoped>
  .elcard {
    position: relative;
    min-height: 600px;
  }
    .itembox{
      .itembox_item{
        background: #f1f2fd;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        margin-bottom: 10px;
        box-sizing: border-box;
        transition: 0.3s;
        cursor: pointer;
        cursor: move;
        font-size: 14px
      }
      .itembox_item:hover {

          border: 1px dashed #579ff8;
          color: #579ff8;
          transition: 0.3s;
      }
    }

  .elcardzz {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .formscont {
    min-height: 600px;
  }

  .formitem {
    position: relative;
    padding: 3px;
    overflow: hidden;
    border-radius: 3px;
    box-sizing: border-box;
  }

  .formitem2 {
    position: relative;
    padding: 3px;
    overflow: hidden;
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px dashed #3a88ed;
    cursor: move;
  }

  .formitem2:hover {
    border: 1px dashed red;
    transition: 0.5s;
  }

  .formitemzz {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .hxdiv {
    width: 100%;
    height: 2px;
    background: red;
    border-radius: 2px;
  }

  .icons1 {
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
